<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.name"
        placeholder="职位名称"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-input
        v-model="listQuery.contactName"
        placeholder="联系人"
        style="width: 200px;margin-left: 10px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        size="medium"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        size="medium"
        type="primary"
        icon="el-icon-refresh"
        @click="reset"
      >
        重置
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        size="medium"
        type="primary"
        icon="el-icon-plus"
        @click="create"
      >
        发布
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        size="medium"
        type="warning"
        icon="el-icon-delete"
        @click="deleteList"
      >
        删除
      </el-button>
    </div>

    <div class="table-item">
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column label="序号" width="50" align="center">
          <template slot-scope="scope">
            {{ listQuery.limit * (listQuery.page - 1) + (scope.$index + 1) }}
          </template>
        </el-table-column>
        <el-table-column label="职位名称" align="center">
          <template slot-scope="{row}">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系人" width="100" align="center">
          <template slot-scope="{row}">
            <span>{{ row.contactName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系电话" align="center">
          <template slot-scope="{row}">
            <span>{{ row.contactPhone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系邮箱" align="center">
          <template slot-scope="{row}">
            <span>{{ row.email }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发布时间" align="center">
          <template slot-scope="{row}">
            <span>{{ $moment(row.releaseTime).format('YYYY-MM-DD HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="浏览次数" width="80" align="center">
          <template slot-scope="{row}">
            <span>{{ row.frequency }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="320" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button size="mini" type="primary" plain @click="handleView(row.id)">
              查看
            </el-button>
            <el-button size="mini" class="mr10" type="primary" plain @click="handleEdit(row.id)">
              编辑
            </el-button>
            <el-popconfirm
              title="是否删除该职位？"
              @onConfirm="handleDelete(row.id)"
            >
              <el-button slot="reference" class="mr10" type="warning" plain size="mini">删除</el-button>
            </el-popconfirm>
            <el-button size="mini" type="success" plain @click="handleResume(row.id)">
              简历
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import {
  fetchRecruitmentList,
  deleteRecruitment,
  deleteRecruitmentList
} from '@/api/recruitment'
import Pagination from '../../components/Pagination' // secondary package based on el-pagination
export default {
  name: 'MyPost',
  components: { Pagination },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        name: undefined,
        contactName: undefined
      },
      multipleSelection: undefined
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      fetchRecruitmentList(this.listQuery).then(response => {
        this.list = response.data.recruitmentList
        this.total = response.data.count
        setTimeout(() => {
          this.listLoading = false
        }, 0.5 * 1000)
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleView(id) {
      this.$router.push({ path: '/job/view', query: { recruitmentId: id }})
    },
    handleEdit(id) {
      this.$router.push({ path: '/job/edit', query: { recruitmentId: id }})
    },
    create() {
      this.$router.push({ path: '/job/new' })
    },
    reset() {
      this.listQuery.name = undefined
      this.listQuery.contactName = undefined
      this.listQuery.page = 1
      this.listQuery.limit = 10
      this.getList()
    },
    handleDelete(id) {
      const param = { recruitmentId: id }
      deleteRecruitment(param).then(
        (response) => {
          this.$message.success('删除成功')
          this.getList()
        },
        (error) => {
          this.$message.error(error.message)
        }
      )
    },
    // 加载该职位收到的简历
    handleResume(id) {
      this.$router.push({ path: '/resume/recruitment', query: { recruitmentId: id }})
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteList() {
      // 首先进行校验
      if (this.multipleSelection == null) {
        this.$message.info('请至少选择一个职位')
        return
      }
      this.$confirm('请确认是否删除职位', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 处理数据
        let recruitmentIdList = ''
        for (let j = 0; j < this.multipleSelection.length; j++) {
          recruitmentIdList = recruitmentIdList + '-' + parseInt(this.multipleSelection[j].id)
        }
        const param = { recruitmentIdList: recruitmentIdList }
        deleteRecruitmentList(param).then(
          (response) => {
            this.$message.success('删除职位成功')
            this.getList()
          },
          (error) => {
            this.$message.error(error.message)
          }
        )
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .table-item {
    margin-top: 20px;
  }

  .mr10 {
    margin-right: 10px;
  }

  .filter-container {
    padding-top: 10px;
    padding-bottom: 10px;
  }
</style>
